﻿<html>
<head>
		<title>Demo display info when mouse move on a pic</title>

        <style type="text/css">
		.tooltip {
			border-bottom: 1px dotted #000000; color: #000000; outline: none;
			cursor: help; text-decoration: none;
			position: relative;
		}
		.tooltip span {
			margin-left: -999em;
			position: absolute;
		}
		.tooltip:hover span {
			border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
			box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
			font-family: Calibri, Tahoma, Geneva, sans-serif;
			position: absolute; left: 1em; top: 2em; z-index: 99;
			margin-left: 0; width: 150px;
		}
		
		
		.tooltip:hover img {
			border: 0; margin: -10px 0 0 -55px;
			float: left; position: absolute;
		}
		.tooltip:hover em {
			font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
			display: block; padding: 0.2em 0 0.6em 0;
		}
		.classic { padding: 0.8em 1em; }
		.custom { padding: 0.5em 0.8em 0.8em 2em; }
		* html a:hover { background: transparent; cursor: help; }
		.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
		.critical { background: #FFCCAA; border: 1px solid #FF3334;	}
		.help { background: #9FDAEE; border: 1px solid #2BB0D7;	}
		.info { background: #9FDAEE; border: 1px solid #2BB0D7;	}
		.warning { background: #FFFFAA; border: 1px solid #FFAD33; }
		</style>


</head>
	<body leftmargin="0" topmargin="0">
		<img border="0" src="http://www.net-a-porter.com/alfresco/nap/webAssets/magazine/issues/issue_262/final_touch/common/page_1/productsBG.jpg?v=0.3" usemap="#map">
        <map name="map">

        <a class="tooltip" href="#ChiTietSanPham1" style="position:absolute; top:50px; left:587px; z-index:10000">
        <area class="tooltip" shape="circle" coords="587, 99, 86" title="" alt="specifies the alternative text.11111" />
        <span class="classic"> 
        <span style="color:Blue; margin:0; padding:0; top:0">Product name 1 </span> <br /> 
        <span style="color:#ca1c1c; margin:0; padding:0; top:25">$20</span>  </span>
        </a>

        <a class="tooltip" href="#ChiTietSanPham1" style="position:absolute; top:90px; left:777px; z-index:10000">
        <area class="tooltip" shape="circle" coords="777, 156, 90" title="" alt="" />
        <span class="classic"><span style="color:Blue; margin:0; padding:0; top:0">Product name 1 </span> <br /> 
        <span style="color:#ca1c1c; margin:0; padding:0; top:25">$20</span>  
        </span>
        </a>

        <a class="tooltip" href="#ChiTietSanPham2" style="position:absolute; top:187px; left:437px; z-index:10000">
        <area class="tooltip" shape="circle" coords="437, 317, 82" title="" alt="" />
        <span class="classic"><span style="color:Blue; margin:0; padding:0; top:0">Product name 2 </span> <br /> 
        <span style="color:#ca1c1c; margin:0; padding:0; top:25">$30</span>  
        </span>
        </a>

        <a class="tooltip" href="#ChiTietSanPham2" style="position:absolute; top:187px; left:634px; z-index:10000">
        <area class="tooltip" shape="circle" coords="634, 270, 77" title="" alt="" />
        <span class="classic"><span style="color:Blue; margin:0; padding:0; top:0">Product name 2 </span> <br /> 
        <span style="color:#ca1c1c; margin:0; padding:0; top:25">$30</span>  
        </span>
        </a>

        <a class="tooltip" href="#ChiTietSanPham3" style="position:absolute; top:339px; left:575px; z-index:10000">
        <area class="tooltip" shape="circle" coords="575, 437, 76" title="" alt="" />
        <span class="classic"><span style="color:Blue; margin:0; padding:0; top:0">Product name 3 </span> <br /> 
        <span style="color:#e7dada; margin:0; padding:0; top:25">$60</span>  
        </span>
        </a>

        <a class="tooltip" href="#ChiTietSanPham3" style="position:absolute; top:399px; left:769px; z-index:10000">
        <area class="tooltip" shape="circle" coords="769, 501, 81" title="" alt="" />
        <span class="classic"><span style="color:Blue; margin:0; padding:0; top:0">Product name 3 </span> <br /> 
        <span style="color:#ca1c1c; margin:0; padding:0; top:25">$60</span>  
        </span>
        </a>
         

			
		        </map>



              
    </body>
</html>